Introduktion til kurset
rust-fjerner bl.a. Unit test

Begrebs-kort.
(OneNote til noter).

Walkthrough: Create and run unit tests for managed code
Use code coverage to determine how much code is being tested

Unit Testing (Power point)

Begrebs-kort (Power point)

Har du den nødvendige software:

• Visual Studio Enterprise 2017 or 2019
  Du får licens-nøgle fra Azure Dev Tools (tidligere Microsoft Imagine)
• GitHub Desktop
• ReSharper (du skal have en licens-nøgle)

Læs og afprøv følgende tutorials:
Walkthrough: Create and run unit tests for managed code

Bemærk: For at benytte code covarage i VS2019 med Bank eksemplet , højreklik på 'BankTest" i "Test Explorer" og kør "Analyze Code Covarage for Selected Test"

Gennemgå og diskuter parvist følgende eksempler: 
TryingUnitTesting | Animal farm | Zoo

Extra: Hackerrank.com Programmerings-konkurrencer osv etc

Component + unit test

Microsoft .Net Core Guide:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

Læs og afprøv følgende tutorials:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

Calculator Part1 (.Net Standard library)
Calculator Part2 (program/applikation)

HTML5/CSS3
Semantic tags:
<nav>, <section>, <article>, <footer>

Flexible box model
(-webkit)
More CSS3 Features
Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions

Visual Studio Code (VSCode)
Links (VSCode):
Download: https://code.visualstudio.com/
Beginner's Guide: https://channel9.msdn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code

HTML
http://www.w3schools.com/htmL/

CSS(Cascading Style Sheets)
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp

HTML DOM
http://www.w3schools.com/js/js_htmldom.asp
Linkedin.com/learning:  What is the DOM

Video:
Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html

Bootstrap
Links (Bootstrap):
Bootstrap: http://getbootstrap.com/
How to add a Navigation bar to your app:
https://www.youtube.com/watch?v=23bpce-5s8I ( Bootstrap 4 Navbar Concepts )

W3Schools Responsive Web Design - The Viewport

Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html

Google
Test tool: Mobile-friendly Test

Bemærk:
Er HTMLog CSS helt nyt for dig, kunne det være en god ide at gennemgå øvelserne i følgende tutorial fra Codecademy:
https://www.codecademy.com/learn/learn-html-css

Et alternativ eller suplement til Codecademy er W3Schools:
https://www.w3schools.com/

Er du allerede bekendt med HTML/CSS - kan du evt se nærmere på LinkedIn.learning (Lynda.com), her finder du mange interessante tutorials.

Eksempler (Kode vist i klassen):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

HTML5Stuff.zip (HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)

Opgave:
MyFirstMovies - HTML/CSS

Opgave: (Lynda.com)
Bootstrap 4: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

Eksempler (Kode vist i klassen):
Bootstrap4Test.zip (Bootstrap 4 - VSCode)
BootstrapLynda.zip(VSCode)

1. Basic Types
2. Variable Declarations
3. Functions (only the sections Introduction + Functions)
4. Iterations and Generators

Exercise: (Install: Node + npm, Git and TypeScript)
Install Node + npm (download: https://nodejs.org/en/)
Verify that it works by running: node -v

Install Git (download: https://git-scm.com/)
Verify that it works by running: git --version

Install the TypeScript compiler globally by issuing:
npm install -g typescript
Verify the compiler works by running
tsc -v

Exercise: (Typescript)
Collect words
Calculator

Hint: Use Chrome Dev Tools to monitor your application, specially the Console
In Chrome type Ctrl+Shift+J

Exercise: (Typescript)
Exercise1-TypeScript.html
Exercise2-TypeScript.html

Solutions:
CollectWords
Exercise1-TypeScript.zip
Exercise2-TypeScript.zip

GitHub:
Hello World Guide
Understanding the GitHub flow

Webpack 4: https://webpack.js.org/

Install the extension TSLint to Visual Studio Code
TSLint will help you write good (and human readable) TypeScript programs.

Clone (using git) the WebPack template
Git clone https://github.com/dimselab/Webpack-template
Rename the webpack folder to a more appropriate name for your current project.
In the command line go into the folder yourCurrentProject
Run “npm install” to get the necessary modules.
Run “ code .” to start Visual Studio Code
Run “npm run watch” to ask WebPack to monitor and transpile your file.

Collect Words (TypeScript DOM, event handling, functions, arrays, if statement) | Solution
Hint: Use Chrome Dev Tools to monitor your application, specially the Console
In Chrome type Ctrl+Shift+J

Calculator (TypeScript DOM, event handling, functions, type conversion, switch statement)

Upload your web applications to Microsoft Azure. Help!

TypeScript

1. Classes
2. Interfaces
3. Namespaces (export + import)

Axios

1. Sebastian Eschweiler Getting Started with Axios
   This is a JavaScript tutorial. We should convert to TypeScript.
2. GitHub Axios documentation
3. Travis Horn Building json2table: Turn JSON into an HTML table
4. Extra: GitHub offers a REST API. Try it. How to display the data?

Eksempler (Kode vist i klassen):

TypeScriptSayHello
Dom Manipulation
TypeScriptEventHandling
Pong Game
TypeScriptObjectCarousel

Exercise: (TypeScript)
Make changes to the Pong Game
Make changes to the Object Carousel

Eksempler (Kode vist i klassen):

1. My First REST (consuming a simple REST service from TypeScript using Axios)
2. General REST consumer
3. Peters Cars (REST GET all, POST, DELETE)
4. Generic Table
5. List + detail
6. Calculator REST (REST POST)

Exercise: (TypeScript, Axios)

1. Go through Getting Started with Axios
   This is a JavaScript tutorial. You should convert to TypeScript.
2. Consume the REST services you made in TEK class
   Like the Customer service
3. High score list for Pong-like game (use REST service)
4. Object Carousel, make it work with JSON

Bunden opgave (Mock Eksamen)

Anders Børjesson Uploading HTML, CSS and JavaScript to Azure using FTP

Bemærk:
For at kunne benytte de nye async/await fra JavaScript version: ES2018 skal tsconfig.json opdateres så "target" property ændres fra "es5" til "es2018".

TypescriptMyFirstRest.zip (Opdateret version med ES2018, async/await)
AxiosDemo.zip (løsning til Exercise 1 - TypeScript, Axios, med async/await)

Eksempler (Kode vist i klassen):
SeleniumCalculatorTest.zip (Selenium WebDriver + MSTest)

Exercise: (UI Testing med Selenium + Azure deployment)
Hvis du ikke har prøvet at uploade et HTML projekt til Azure, så prøv Collect Word el Calculator (se evt:  Uploading HTML, CSS and JavaScript to Azure using FTP)

Lav en UI Test af Collect Word / Calculator med Selenium WebDriver og MSTest

Exercise: (Pair-programming)
REST + TypeScript from user stories (pair programming)

Rest Webservice
Consumer
(Swagger)
Azure
UnitTest
Cors
DB

Swagger
How to quickly install swagger in a .NET Core application

Bemærk
1. Vi anbefaler at du nedgraderer din webservice fra .Net Core v. 3.0 til v. 2.1
Ellers passer opgaverne ikke (fx er der en WeatherForcast controller i stedet for value controller default i v.3.0).

1. 
   Exercise: (Pair-programming)
   RESTService#1-Simple
   RESTService#2-Advanced
   RESTService#3-HelpPages (problem med CORE 3.0)
   RESTService#4-Test+Azure
   RESTService#5-Consuming
   RESTService#6-Cors
   RESTService#7-Database (husk firewall i azure, tillad alle service fra azure)

Løsning: RESTService#1-7.zip

Rasberry Pi SenseHat
Getting started with the SenseHat
Sense Hat API Reference
W3School: Python
Python Quick Guide

Extra: Learn more Python3:
Tutorials Point: Python Tutorial
The Python Tutorial
Python Software Foundation
Guru99: Python Tutorial for Beginners

Examples:
Python + Sense HAT examples
Tamagotchi in the emulator (see: Processing.py)

1. Disco and Christmas lights 
2. Show temperature, humidity or pressure on the display using (very) simple graphs or digits.
3. Play with some of the examples from W3Schools Python
4. Simple Python (no Sense HAT): Download interpreter + write code in Notepad
5. Extra: Download PyCharm. Same company as ReSharper = same license

IoT: UDP

Fredag: MOCK Prog/Tek Eksamen 9.00-13.00

MA 11:00 code freeze
TO mock exam
FR demo dag